<template>
  <el-table-column
    v-if="!c.hidden"
    :label="c.txt"
    :prop="c.col"
    :width="c.width"
    :sortable="c.sort ? 'custom' : false"
    :class-name="getCellClass(c)"
    :align="c.align || 'left'"
    :formatter="(row, col, val, $i) => formatter(row, col, val, $i, c.dataType, c)"
    resizable
    :show-overflow-tooltip="useTooltip"
  />
</template>
<script>
import formatter from '../../utils/formatter'
import { TableColumn } from 'element-ui'
import { reg } from '../../utils/url.js'
export default {
  name: 'TableCol',
  components: {
    elTableColumn: TableColumn
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    c: Object,
    // eslint-disable-next-line vue/require-default-prop
    cfg: Object,
    // eslint-disable-next-line vue/require-default-prop
    rows: Array,
    // eslint-disable-next-line vue/require-default-prop
    page: Object,
    // eslint-disable-next-line vue/require-default-prop
    form: Object,
    // eslint-disable-next-line vue/require-default-prop
    table: Object,
    // eslint-disable-next-line vue/require-default-prop
    searchList: Object
  },
  computed: {
    useTooltip() {
      return !this.cfg.edit
    }
  },
  methods: {
    /**
     * 检查列, 是否是可编辑类名
     */
    getCellClass(c) {
      if (this.cfg.edit && c.dataType && c.dataType.indexOf('w-') > -1) {
        return 'edit-cell'
      } else {
        return ''
      }
    },
    /**
     * 格式化
     */
    formatter(row, col, val, $i, format, conf) {
      if (this.c.formatter) {
        return this.c.formatter({ row, col, $i })
      }
      const { page } = this
      const item = {
        val,
        format,
        page,
        col,
        row,
        rows: this.rows,
        curRow: this.curRow,
        key: col.property,
        config: this.cfg,
        form: this.form,
        table: this.$refs.table,
        searchList: this.searchList,
        conf,
        on: {
          edit: () => {
            page.isEdit = Math.random()
          },
          click(e) {
            const s = e.val
            if (reg.test(s)) {
              // eslint-disable-next-line eqeqeq
              if (s.indexOf('https://') != -1 || s.indexOf('http://') != -1) {
                window.open(s, '_blank')
              } else {
                window.open(`http://${s}`, '_blank')
              }
            } else {
              window.$$.msg.error('网址不合法')
            }
          }
        }
      }
      return formatter(item)
    }
  }
}
</script>
<style lang="scss" scoped>
.isInput {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid rgba(191, 191, 191, 1) !important;
  border-radius: 3px !important;
}
.seriesCode {
  width: 100%;
  border: none;
  background: transparent;
  color: transparent;
  text-shadow: 0 0 0 #000;
}
</style>
